<template>
  <div>
    <v-dialog
        v-model="dialog"
        width="50%"
        scrollable
    >
      <v-card>
        <v-card-title>
          <span class="text-h5">认证材料</span>
        </v-card-title>
        <v-card-text v-if="comment === ''">无</v-card-text>
        <v-card-text v-else v-html="comment"></v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
              color="green darken-1"
              text
              @click="dialog = false"
          >
            关闭
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-data-table
        :headers="headers"
        :items="desserts"
        class="elevation-1"
        style="min-height: 500px"
        disable-sort
        hide-default-footer
    >
      <template v-slot:[`item.status`]="{ item }">
        <v-chip v-if="item.status === 1"
                color="success"
                dark
        >
          已通过
        </v-chip>
        <v-chip v-else-if="item.status === 2"
                color="error"
                dark
        >
          已拒绝
        </v-chip>
      </template>
      <template v-slot:[`item.edit`]="{ item }">
        <a @click="checkComment(item)">查看详情</a> ｜ <span v-if="item.status === 2"><a @click="withdraw(item)">撤销处理</a> ｜</span> <a @click="Delete(item)">删除</a>
        <!--      <v-divider vertical/>-->
        <!--      <v-icon @click="item.status = ~item.status">{{ icons.mdiCheckBold }}</v-icon>-->
      </template>
      <template v-slot:[`item.research_id`]="{ item }">
        <a @click="$router.push({path: '/profile/' + item.research_id})">{{ item.research_id }}</a>
      </template>
    </v-data-table>
  </div>
</template>

<script>
import {
  mdiPencil,
  mdiCheckBold
} from "@mdi/js";
import axios from "axios";

export default {
  name: "HaveDealt",
  inject: ['reload'],
  data () {
    return {
      dialog: false,
      comment: '',
      headers: [
        {
          text: '申请序号',
          align: 'center',
          value: 'id'
        },
        {
          text: '申请者ID',
          value: 'applyer',
        },
        {
          text: '学者ID',
          value: 'research_id',
        },
        // { text: '备注', value: 'apply_comment' },
        { text: '处理状态', value: 'status' },
        { text: '操作', value: 'edit' },
      ],
      desserts: [],
    }
  },
  methods: {
    withdraw(item){
      // this.desserts.remove(item);
      const that = this;
      axios
        .patch('/api/apply/researcher/' + item.id + '/', {
          status: 0
        }, {
          headers: {
            Authorization: 'Bearer ' + localStorage.getItem('access')
          }
        })
        .then(function (){
          // item.status = 0;
          that.$notify.success({
            title: '处理已撤销'
          })
          that.reload();
        })
        .catch(function (error){
          that.$notify.error({
            title: '操作失败',
            message: error.message
          })
        })
    },
    Delete(item){
      // this.desserts.remove(item);
      const that = this;
      axios
          .delete('/api/apply/researcher/' + item.id + '/', {
            headers: {
              Authorization: 'Bearer ' + localStorage.getItem('access')
            }
          })
          .then(function (){
            that.$notify.success({
              title: '删除成功'
            })
            that.reload();
          })
          .catch(function (error){
            that.$notify.error({
              title: '操作失败',
              message: error.message
            })
          })
    },
    checkComment(item){
      this.dialog = true;
      this.comment = item.apply_comment;
    }
  },
  mounted(){
    const that = this;
    this.$api.getApplyList.get(3)
        .then(function (response){
          console.log(response)
          for(let i = 0; i < response.results.length; ++i){
            if(response.results[i].status > 0){
              that.desserts.push(response.results[i])
            }
          }
          // that.desserts = response.results;
        })
  },
  setup(){
    return {
      icons: {
        mdiPencil,
        mdiCheckBold
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bold {
  font-weight: bold;
}
</style>